﻿@model SaleSoft.Models.BaseClient.ds_album

@{
    ViewBag.Title = "Hình ảnh album";
    Layout = "~/Areas/administrator/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script type="text/javascript">
    function onUploaded(e) {
        var files = e.files;
        var grid = $('#grdPhoto').data('tGrid');
        grid.rebind();
    }
</script>

<div class="bPageTitle">
    <div class="ptBody">
        <div class="content">
            <img src="/s.gif" alt="Account" class="pageTitleIcon" title="Account"><h1 class="pageType">
                Quản trị<span class="titleSeparatingColon">:</span></h1>
            <h2 class="pageDescription">
                Hình ảnh Album</h2>
            <div class="blank">
                &nbsp;</div>
        </div>
    </div>
    <div class="ptBreadcrumb">
    </div>
</div>
<div class="hotListElement">
    <div class="bPageBlock secondaryPalette">
        <div class="pbHeader">
            <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                    <tr>
                        <td>
                            @if (Model != null) {
                                <table>
                                    <tr>
                                        <td style="width: 20%">
                                            Tên album
                                        </td>
                                        <td style="width: 90%; padding-left: 10px;">
                                            <span style="color: Blue; font-weight: bold;">@Model.tenablum</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 20%">
                                            Hình ảnh
                                        </td>
                                        <td style="width: 90%; padding-left: 10px;">
                                            @( Html.Telerik().Upload()
                            .Name("UploadPhotos")
                            .Multiple(true)
                            .Async(async => {
                                async.AutoUpload(false);
                                async.Save("UploadAlbumPhoto", "Album");
                            })
                            .ClientEvents(events => events.OnSuccess("onUploaded"))
                    )
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" style="color: Blue; font-weight: bold;">
                                            Click on cell to edit Name, OrderNo and Active value
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                        </td>
                                    </tr>
                                </table>
                            } else {
                                <p style="text-align: center; color: Red; font-weight: bold;">
                                    Error on load. Please go back to Albums tab and try again.
                                </p>   
                            }
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="pbBody">
            @(Html.Telerik().Grid(Model.HinhAnh)
                            .Name("grdPhoto")
                            .Selectable()
                            .Sortable()
                            .DataKeys(keys => keys.Add(o => o.id_hinhanh))
                            .Editable(edit => edit.Mode(GridEditMode.InCell))
                            .ToolBar(cmd => cmd.SubmitChanges().ButtonType(GridButtonType.ImageAndText).SaveText("Lưu").CancelText("Hủy"))
                            .Columns(cols => {
                                    cols.Bound(o => o.tenhinh).Width(300).Title("Tên hình").HtmlAttributes(new { @style = "vertical-align:middle;" }).ReadOnly(true);
                                    cols.Bound(o => o.sothutu)
                                        .Width(100)
                                        .EditorTemplateName("SoThuTu")
                                        .Title("Số thứ tự")
                                        .HtmlAttributes(new { @style = "text-align:center;vertical-align:middle;" });
                                    cols.Template(@<text>
                                                <img src="@Href("~/UploadImages/" + @item.tenhinh)" alt="" width="100px;" />
                                            </text>)
                                        .ClientTemplate("<img src='" + @Href("~/UploadImages/<#=tenhinh#>") + "' alt='' width='100px;' />")
                                        .Title("Hình ảnh").Width(200).HtmlAttributes(new { @style = "text-align:center;vertical-align:middle;" });
                                    cols.Command(cmd => cmd.Delete().ButtonType(GridButtonType.Image)).Width(50);
                                })
                            .Pageable(paging => paging.PageSize(10))
                            .DataBinding(binding => binding.Ajax().Select("_Images", "Album")
                                                                  .Update("_UpdatePhotoInfo", "Album"))
                    )
        </div>
        <div style="padding:5px;">
            @Html.ActionLink("Quay lại", "Index", "Album",null,  new { @class="btn"})
        </div>
        <div class="pbFooter secondaryPalette">
            <div class="bg">
            </div>
        </div>
    </div>
</div>
